<template>
  <div v-loading="loading" class="app-container check_order_add">
    <div class="header_title_box">
      <h2>基本信息</h2>
    </div>
    <div class="select_form_box">
      <div class="filter-container">
        <el-form :ref="formName" :model="formFieldsData" :rules="rules" label-width="100px">
          <el-row :gutter="69">
            <el-col v-if="id" :span="6" :offset="0">
              <el-form-item label="盘库单号" prop="code">
                <el-input v-model="formFieldsData.code" placeholder="请输入盘库单号" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="盘库名称" prop="name">
                <el-input v-model="formFieldsData.name" placeholder="请输入盘库名称" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="选择实体仓" prop="entity_warehouse_id">
                <el-select v-model="formFieldsData.entity_warehouse_id" clearable placeholder="-请选择-" class="input-with-select mr64">
                  <el-option v-for="item in entityWarehouseList" :key="item.id" :value="item.id" :label="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="备注说明" prop="notes">
                <el-input v-model="formFieldsData.notes" placeholder="请输入备注说明" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="dialog-footer-center">
      <span>
        <el-button type="primary" :loading="btnLoading" @click="handleSubmit">保存</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import chooseWarehouse from '../../mixins/chooseWarehouse'
export default {
  name: 'CheckOrderAdd',
  mixins: [chooseWarehouse],
  data() {
    return {
      id: '', // 盘库单id
      info: {}, // 盘库单info
      loading: false,
      formName: 'checkOrderForm', // form 名称
      formFieldsData: {
        code: '', // 盘库单号
        name: '', // 盘库名称
        entity_warehouse_id: '', // 实体仓
        notes: '' // 调入虚拟仓
      },
      rules: {
        name: [
          // 盘库名称
          {
            required: true,
            message: '请输入盘库名称',
            trigger: ['blur']
          },
          {
            max: 50,
            message: '盘库名称须在50个字符以内'
          }
        ], // 实体仓
        entity_warehouse_id: [
          {
            required: true,
            message: '请选择实体仓',
            trigger: ['change', 'blur']
          }
        ],
        notes: [
          { max: 500, message: '调拨原因须在500个字符以内', trigger: 'blur' }
        ] // 入库原因
      },
      btnLoading: false
    }
  },
  watch: {
    $route(router) {
      this.checkRouterHasId(router)
    }
  },
  created() {
    const vm = this
    vm.checkRouterHasId(vm.$route)
  },
  methods: {
    // 检查路由是否有id
    checkRouterHasId(router) {
      const vm = this
      const id = router.params.id
      if (id) {
        vm.id = id
        vm.getInfo()
      }
    },
    // 获取详情
    getInfo() {
      const vm = this
      vm.loading = true
      vm.$http
        .get(`/check-order/${vm.id}`)
        .then((res) => {
          vm.info = res.data
          const { code, name, entity_warehouse_id, notes } = res.data
          vm.formFieldsData.name = name
          vm.formFieldsData.code = code
          vm.formFieldsData.entity_warehouse_id = entity_warehouse_id
          vm.formFieldsData.notes = notes
          vm.loading = false
        })
        .catch(() => {
          vm.loading = false
        })
    },
    // 提交
    handleSubmit() {
      const vm = this
      vm.$refs[vm.formName].validate((valid) => {
        if (valid) {
          vm.id ? vm.edit() : vm.add()
        }
      })
    },
    // 添加
    add() {
      const vm = this
      vm.$http
        .post('/check-order', vm.formFieldsData)
        .then((res) => {
          vm.$message.success('添加成功')
          vm.handleCancel()
          vm.btnLoading = false
        })
        .catch(() => {
          vm.btnLoading = false
        })
    },
    // 编辑
    edit() {
      const vm = this
      vm.btnLoading = true
      vm.$http
        .put(`/check-order/${vm.id}`, vm.formFieldsData)
        .then((res) => {
          vm.$message.success('编辑成功')
          vm.handleCancel()
          vm.btnLoading = false
        })
        .catch(() => {
          vm.btnLoading = false
        })
    },
    // 取消
    handleCancel() {
      const vm = this
      vm.$refs[vm.formName].resetFields()
      vm.formFieldsData.code = ''
      vm.$router.push({ path: '/storage/checkOrder' })
    }
  }
}
</script>

<style lang="scss" scoped>
.check_order_add {
  .filter-container {
    border: none;
  }
}
</style>
